<template>
  <div>
    <div class="tops">
      <div class="top-left">
        <i class="van-icon van-icon-arrow-left" @click="handleq">
          <!---->
        </i>
      </div>
      <div class="top-center">用户编辑</div>
    </div>
    <div class="contents">
      <div class="head-portrait">
        <img
          src="../../assets/img/user.png"
          alt=""
        />
        <br />
        <van-uploader :after-read="afterRead">
            <van-button type="primary" >
                更换头像
            </van-button>
        </van-uploader>
      </div>
      <van-cell-group>
        <van-field v-model="value1" label="会员昵称:" placeholder="" />
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="value2" label="真实姓名:" placeholder="" />
      </van-cell-group>
      <div class="mis">
          <span>性别:</span>
          <van-radio-group 
            v-model="radio" 
            direction="horizontal"
            checked-color="red"
          >
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
        </van-radio-group>
      </div>
        
      <van-cell-group>
        <van-field v-model="value3" label="身份证号:" placeholder="" />
      </van-cell-group>
      <van-button 
            round type="info"
            size="large"
            color="#df2321"
            class="send"
        >
            确认保存
        </van-button>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            value1: '',
            value2: '',
            value3: '',
            radio:'1',
        };
    },
    methods: {
    handleq() {
      this.$router.go(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/editing.css");
</style>